<template>
  <!--  展示-->
  <div class="q-my-sm">
    <q-banner class="bg-primary text-white flex">
      <h4 class="flex-center text-center">院校库</h4>
      <h5 class="flex-center text-center">
        为用户提供权威的研究生招生单位信息查询服务
      </h5>
    </q-banner>
  </div>

  <!--  选择-->
  <div id="search" class="q-px-md q-py-md">
    <q-input v-model="text" square outlined label="请输入招生单位名称" />
    <q-btn color="primary" label="搜索" @click="performSearch" />
  </div>

  <div id="chooseAddress" class="q-px-md q-py-md">
    <p class="text-blue-5 size">院校所在地:</p>
    <p
      v-for="region in regions"
      :key="region"
      class="columnneeded"
      :class="{ selected: selectedRegion === region, hover: isHovered }"
      @click="selectRegion(region)"
    >
      {{ region }}
    </p>
  </div>
  <div id="chooseCharacter" class="q-px-md q-py-md">
    <p class="text-blue-5 size">院校特性:</p>
    <p
      v-for="title in titles"
      :key="title"
      class="columnneeded"
      @click="selectTitle(title)"
    >
      {{ title }}
    </p>
  </div>

  <p class="text-grey">
    注：各招生单位的院校库信息由其自主维护，如有疑问，请咨询发布单位。
  </p>

  <!--        院校-->
  <div class="sch-list-container">
    <q-card
      v-for="school in schools"
      :key="school.id"
      flat
      bordered
      class="my-card"
    >
      <div class="sch-item">
        <!-- 图片 -->
        <q-img
          :src="school.imgUrl"
          onerror="this.src='https://t1.chei.com.cn/common/xh/default.jpg'"
          style="width: 200px; height: 200px"
        />
        <div class="info-box">
          <!-- 院校标题 -->
          <div class="sch-title">
            <a :href="school.officialwebsite" target="_blank">
              {{ school.name }}
            </a>
            <span v-if="school.is211" class="sch-tag">“双一流”建设高校</span>
          </div>
          <!-- 院校部门 -->
          <div class="sch-department">
            <q-icon class="text-blue" style="font-size: 2em" name="room" />
            {{ school.location }}<br />
            <q-icon class="text-blue" style="font-size: 2em" name="grade" />{{
              school.ranking
            }}
            <br />
            <q-icon class="text-blue" style="font-size: 2em" name="label" />{{
              school.description
            }}
          </div>
        </div>
      </div>
    </q-card>
  </div>
  <div class="q-pa-lg flex flex-center">
    <q-pagination
      v-model="current"
      :max="totalPage"
      input
      @click="onPageChange"
    />
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { baseurl } from "src/js/global";
import { useQuasar } from "quasar";
import { get } from "src/js/fetch";
const $q = useQuasar();
const router = useRouter();
const schools = ref({});
const totalPage = ref(10);
const text = ref("");
const current = ref(1);
const size = 10;
const selectedRegion = ref("全部");
const selectedTitle = ref(0);

const regions = [
  "全部",
  "北京",
  "天津",
  "河北",
  "山西",
  "内蒙古",
  "辽宁",
  "吉林",
  "黑龙江",
  "上海",
  "江苏",
  "浙江",
  "安徽",
  "福建",
  "江西",
  "山东",
  "河南",
  "湖北",
  "湖南",
  "广东",
  "广西",
  "海南",
  "重庆",
  "四川",
  "贵州",
  "云南",
  "西藏",
  "陕西",
  "甘肃",
  "青海",
  "宁夏",
  "新疆",
  "香港",
  "澳门",
  "台湾",
];
const titles = ["全部", "双一流建设高校"];
function change() {
  const urlChoose =
    baseurl +
    "school/area/" +
    selectedRegion.value +
    "?is211=" +
    selectedTitle.value +
    "&current=" +
    current.value +
    "&size=10";
  get(urlChoose)
    .then((res) => {
      if (res.success) {
        schools.value = res.data;
        // 考虑添加渲染数据到页面的逻辑
        totalPage.value = res.totalPage;
      } else {
        $q.notify({
          message: res.errorMsg,
          type: "warning",
          position: "center",
        });
        // 处理错误情况，比如显示错误消息给用户
      }
    })
    .catch((error) => {
      // 处理请求失败的情况
      console.error(`Request failed: ${error}`);
    });
}
function performSearch() {
  const urlSearch =
    baseurl +
    "school/name/" +
    text.value +
    "?current=" +
    current.value +
    "&size=10";
  console.log(text.value);
  get(urlSearch)
    .then((res) => {
      if (res.success) {
        schools.value = res.data;
        totalPage.value = res.totalPage;
      } else {
        $q.notify({
          message: res.errorMsg,
          type: "warning",
          position: "center",
        });
        // 处理错误情况，比如显示错误消息给用户
      }
    })
    .catch((error) => {
      // 处理请求失败的情况
      console.error(`Request failed: ${error}`);
    });
}
function onPageChange() {
  if (selectedRegion.value == "全部") {
    all();
  } else {
    change();
  }
}
function selectRegion(region) {
  // 设置选中的地区
  selectedRegion.value = region;
  current.value = 1;
  if (selectedRegion.value == "全部") {
    all();
  } else {
    change();
  }
}
function selectTitle(title) {
  if (title == "全部") {
    selectedTitle.value = 0;
  } else {
    selectedTitle.value = 1;
  }
  change();
}
function all() {
  const urlAll = baseurl + "school/list?current=" + current.value + "&size=10";
  get(urlAll)
    .then((res) => {
      if (res.success) {
        schools.value = res.data;
        totalPage.value = res.totalPage;
        // 考虑添加渲染数据到页面的逻辑
      } else {
        // 处理错误情况，比如显示错误消息给用户
      }
    })
    .catch((error) => {
      // 处理请求失败的情况
      console.error(`Request failed: ${error}`);
    });
}

onMounted(() => {
  all();
});
</script>
<style>
#search {
  display: flex;
}
#tableCollege {
  color: #333;
  text-align: left;
  font: 14px/1.8 "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, "SimSun", "sans-serif";
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, "SimSun", sans-serif;
  -webkit-font-smoothing: antialiased;
  width: 1180px;
  margin: 0 auto;
  padding-bottom: 198px;
}
.sch-title {
  color: #333;
  text-align: left;
  font: 14px/1.8 "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, "SimSun", "sans-serif";
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, "SimSun", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.sch-tag {
  font: 14px/1.8 "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, "SimSun", "sans-serif";
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, "SimSun", sans-serif;
  -webkit-font-smoothing: antialiased;
  display: inline-flex;
  align-items: center;
  margin-left: 11px;
  padding: 10px 11px;
  height: 20px;
  line-height: 1;
  background: #ebf4fb;
  border-radius: 2px;
  font-size: 12px;
  color: #1887e0;
  white-space: nowrap;
}
.sch-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sch-item {
  color: #333;
  float: left;
  text-align: left;
  font: 14px/1.8 "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, "SimSun", "sans-serif";
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, "SimSun", sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;

  padding: 20px 29px 22px;

  background: #ffffff;
  box-sizing: border-box;
}
.info-box {
  color: #333;
  float: right;
  font: 14px/1.8 "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, "SimSun", "sans-serif";
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, "SimSun", sans-serif;
  -webkit-font-smoothing: antialiased;
  flex: 1;
  min-width: 0;
  font-size: 15px;
}
.my-card {
  margin-bottom: 30px;
  width: 49%;
}
#chooseAddress {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
  justify-content: flex-start;
  width: 1500px;
}
.columnneeded {
  font-size: 20px;
  margin-left: 15px;
}
#chooseCharacter {
  display: flex;
}
.size {
  font-size: 22px;
}
#chooseRank {
  display: flex;
}

.columnneeded:hover {
  color: blue; /* 鼠标悬停时文字颜色变为蓝色 */
  text-decoration: underline; /* 鼠标悬停时文字下划线 */
}

.columnneeded:active {
  color: red; /* 点击时文字颜色变为红色 */
  text-decoration: underline; /* 点击时文字下划线 */
}
.columnneeded.selected {
  color: blue; /* 选中时文字颜色变为蓝色 */
  text-decoration: underline; /* 选中时文字下划线 */
}
</style>
